<template>
  <a-modal
    title="修改邮箱"
    centered
    v-model="visible"
    @ok="handle"
  >
    <a-form :form="form" layout="vertical">
      <a-form-item label="新邮箱">
        <a-input
          v-decorator="[ 'email', {rules: [{ required: true, message: '请输入新邮箱'}]} ]"
          placeholder="请输入新邮箱" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { editEmail } from '@/api/setting'
export default {
  data () {
    return {
      form: this.$form.createForm(this),
      visible: false,
      id: this.$store.getters.userInfo.id
    }
  },
  methods: {
    handle () {
      const email = this.form.getFieldValue('email')
      editEmail(this.id, email).then(res => {
        this.show()
        this.$router.go(0)
      })
    },
    show () {
      this.visible = !this.visible
    }
  }
}
</script>
